import React,{useState, useEffect, useRef} from 'react'
import './Top2.css'
import Allclass from '../Allclass/allclass'
const Top2: React.FC = () => {
 const [isallclass, setisallclass] = useState(false);
 const [ismanys, setismanys] = useState(false);
  const [isalltype, setisalltype] = useState(false);



const allclassMouseEnter=()=>{
 setisallclass(true)
}
  const allclassMouseLeave = () =>{
    setisallclass(false)
    
  };


const ismanysMouseEnter=()=>{
 setismanys(true)
}
  const ismanysMouseLeave = () =>{
    setismanys(false)
    
  };

const endtype=()=>{
setisalltype(!isalltype)
}
   

    return (
        <div className="top2">

            {/* 头左边 */}
            <div className="top_left">
                <img src="https://s.ibaotu.com/next/img/new/btlogo2.9f48.png" alt="" />
            </div>

            {/* 头中间 */}
            <div className="top_nav2">
                <ul>
                    <li>首页</li>
                    <li className='allcalss' onMouseEnter={allclassMouseEnter} onMouseLeave={allclassMouseLeave}><span className='li'>全部分类</span><span className='iconfont icon-hx_xxiajiantou'></span>
                    {isallclass ? <Allclass></Allclass>:''}
                       
                    
                    </li>
                    <li className='cmany' onMouseEnter={ismanysMouseEnter} onMouseLeave={ismanysMouseLeave}><span className='li'>更多</span><span className='iconfont icon-hx_xxiajiantou'></span>
                        {ismanys ?     <div className='manys'>
                            <ul>
                                <li>热门活动</li>
                                    <li>精品专题</li>
                            </ul>
                        </div> : ''}
                    </li>
                    <li id='csearch'>
                        <p className='ctype' onClick={endtype}>全部分类<span className='iconfont icon-hx_xxiajiantou'>
                        {isalltype ?     <div className='alltype'>
                                <ul>
                                    <li>全部分类</li>
                                    <li>摄影图</li>
                                    <li>视频</li>
                                    <li>音频</li>
                                    <li>PPT模版</li>
                                </ul>
                            </div> : ''}
                        </span>
                             
                        </p>
                        <p><input type="text" placeholder='搜索全站素材' /></p>
                        <p className='iconfont icon-xiangji'></p>
                        <p><button>搜索</button></p>
                    </li>
                </ul>
            </div>
            {/* 头右边 */}
            <div className="top_right2">
                <span>
                    企业VIP授权
                </span>

                <span>
                   <a href="/home/user"  style={{color:'#000'}}>个人VIP</a> 
                </span>

                <p className='cimg'>
                    <img src="" alt="" />
                    <span>登录/注册</span>
                </p>
            </div>
        </div>
    )
}

export default Top2
